<template>
  <dl>
    <dd v-for="(item, num) in chapter" :key="num">
      <a href="javascript:void(0)" @click="readBook(item)">{{
        item.chapterName
      }}</a>
    </dd>
  </dl>
</template>

<script setup>
import { reactive, toRefs, onMounted, getCurrentInstance } from 'vue';

const props = defineProps({
  chapter: { type: Array, defult: [] },
});
const emits = defineEmits(['update:value']);
const readBook = item => {
  emits('readBook', item);
};
</script>
<style lang="scss" scoped>
dd {
  display: inline-table;
  border-bottom: 1px dashed #ccc;
  display: inline;
  float: left;
  height: 30px;
  line-height: 30px;
  margin-bottom: 5px;
  overflow: hidden;
  text-align: left;
  text-indent: 10px;
  vertical-align: middle;
  width: 25%;
}
dd a {
  color: black;
  text-decoration: none;
  font-size: 16px;
}
dd :hover {
  color: #fd5500;
}
</style>
